import {
  Courses
} from '@/assets/js/simulateData.js'
import {
  getMyShoppingCar,
  deleteShoppingCar
} from '@/api/carts.js'
import {
  get_img_src
} from '@/utils/index.js'
export default {
  data() {
    return {
      listParam: {
        page: 1, // 当前所在分页数
        size: 5 // 每页显示的条目数
      },
      listDatas: [],
      listPages: {
        layout: 'total, sizes, prev, pager, next, jumper', // 分页显示参数
        page: 1, // 当前所在分页数
        size: 5, // 每页显示的条目数
        sizes: [5, 10, 15, 20], // 每页显示的条目数设置
        total: 0, // 总条数
        count: 5, // 总页数=总条数/每页条目
        counter: 7, // 页码按钮的数量，当总页数超过该值时会折叠
        prevtext: '上一页',
        nexttext: '下一页',
        single: false
      },
      courseNumber: 1,
      multipleSelection: [], // 已选的件商品
      totalPrice: 0 // 合计
    }
  },
  created() {
    // this.listDatas = Courses.data
    this.getMyShoppingCar()
  },
  methods: {
    getMyShoppingCar() {
      this.loadObj = this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getMyShoppingCar(this.listParam).then(response => {
        if (response.code === 200 || response.code === 20000) {
          for (const k in response.data) {
            this.listDatas.push(response.data[k])
            this.listDatas[k].number = response.data[k].number || 1
          }
          console.log()
          this.listPages.total = response.total
        } else {
          this.$message({
            type: 'error',
            message: response.msg
          })
        }
        this.loadObj.close()
      })
    },
    handleChange(row) { // 购买数量
      this.listDatas.forEach(item => {
        if (item.courseId === row.courseId) {
          item.totalPrice = (item.number * item.price).toFixed(2)
        }
      })
      // 判断当前行是否为选中状态
      const isExistence = this.multipleSelection.some(item => item.courseId === row.courseId)
      if (isExistence) {
        this.multipleSelection.forEach(item => {
          if (item.courseId === row.courseId) {
            item.totalPrice = row.totalPrice
          }
        })
        this.handleSelectionChange(this.multipleSelection)
      }
    },
    handleDelete(rowId) { // 删除当前行,并还原选中状态
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((result) => {
        deleteShoppingCar(rowId).then(response => {
          if (response.code === 200 || response.code === 20000) {
            this.removeRow()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: response.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    removeRow() {
      // 模拟删除
      this.listDatas = this.listDatas.filter(item => item.courseId !== rowId)
      // 判断选中状态中是否存在删除数据
      const isExistence = this.multipleSelection.some(item => item.courseId === rowId)
      // 如果存在则从选中状态数组中的删除
      if (isExistence) {
        this.multipleSelection = this.multipleSelection.filter(item => item.courseId !== rowId)
      }
      // 删除之前的选中状态中是否还在存在数据
      if (this.multipleSelection.length > 0) {
        // 根据数据ID 去判断需要选中的数据是那些
        for (let i = 0; i < this.listDatas.length; i++) {
          for (let k = 0; k < this.multipleSelection.length; k++) {
            if (this.listDatas[i].courseId === this.multipleSelection[k].courseId) {
              // 还原选中状态
              this.$nextTick(() => {
                this.$refs.multipleTable.toggleRowSelection(this.listDatas[i])
              })
            }
          }
        }
      }
    },
    img_src(val) {
      return get_img_src(val)
    },
    toggleSelection(rows) { // 全选
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.totalPrice = 0
      this.multipleSelection = val
      val.forEach(item => {
        this.totalPrice += item.totalPrice * 1
      })
      this.totalPrice = this.totalPrice.toFixed(2)
    },
    createOrder() { // 去结算
      const buyNum = this.multipleSelection.length
      if (buyNum <= 0) {
        this.$message({
          message: '请先选择您要购买的课程',
          type: 'info'
        })
        return
      } else {
        this.$message({
          message: '恭喜您，剁手成功',
          type: 'success'
        })
      }
    },
    row_click(row, column, event) {
      this.$router.push({
        path: '/goods/detail',
        query: {
          courseId: '0789760127a74c50b483733d2ca9',
          // courseId: row.courseId,
          courseName: row.courseName
        }
      })
    }
  }
}
